<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>students</title>
    <link rel="stylesheet" href="students.css">
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <link rel="stylesheet" href="lib/datepicker/skin/WdatePicker.css">
</head>

<body>
    <!-- 表格 -->
    <div class="wrap">
        <h2>学生信息管理系统</h2>
        <h4>
            <span id="data-username"></span>
            <span id="data-type"></span>:你好！
            <span id="relogin" style="cursor: pointer; color: rgb(0, 0, 255);">[退出登录]</span>
        </h4>
        <hr>
        <button class="btn btn-primary" id="addStudent">+添加学生</button>
        <table class="table">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>所在城市</th>
                    <th>入学时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr id="template">
                    <td class="data-id"></td>
                    <td class="data-name"></td>
                    <td class="data-age"></td>
                    <td class="data-sex"></td>
                    <td class="data-city"></td>
                    <td class="data-joinDate"></td>
                    <td>
                        <button class="btn btn-primary data-edit">编辑</button>
                        <button class="btn btn-danger data-delete">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>
    <!-- 弹出层 -->
    <div id="mask"></div>
    <div id="pop">
        <h3 id="title">添加学生</h3>
        <div class="form-horizontal">
            <div class="form-group">
                <label for="data-name" class="col-sm-2 control-label">学生姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-name" placeholder="学生姓名">
                </div>
            </div>
            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="data-age" placeholder="年龄">
                </div>
            </div>

            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">性别</label>
                <label class="radio-inline">
				<input type="radio" name="sex" checked  id="data-man">男
			</label>
                <label class="radio-inline">
				<input type="radio" name="sex" id="data-female" >女
			</label>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">所在城市</label>
                <select name="" id="province"></select>
                <select name="" id="city"></select>
                <select name="" id="area"></select>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">入学日期</label>
                <div class="col-sm-10">
                    <input type="date" class="form-control" id="data-joinDate" placeholder="入学日期">
                </div>
            </div>


            <div class="form-group" style="float:right;margin-top:20px;">
                <button id="submit" class="btn btn-primary">确认添加</button>
                <button id="cancel" class="btn btn-default">取消</button>
            </div>
        </div>
    </div>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/city.js"></script>
    <script src="lib/datepicker/WdatePicker.js"></script>
    <script src="lib/common.js"></script>
    <script>
        // 判断sessionStorage里有没有用户信息，如果没有那就跳回登录页面 登录验证
        let userInfo = sessionStorage.getItem("userInfo") || document.cookie.replace("userInfo", "")
        if (!userInfo) {
            location.href = `${address}/login.html`
        }



        //展示用户信息及退出登录
        $("#data-username").html(JSON.parse(userInfo)[0].username)
        $("#data-type").html(JSON.parse(userInfo)[0].usertype ? "学生" : "老师")
            //清除两个里面的数据
        $("#relogin").click(function() {
                sessionStorage.clear()
                document.cookie = "userInfo=xxx;expires=" + new Date("1970-01-01");
                location.href = `${address}/login.html`
            })
            // 判断是学生还是老师，学生没有编辑功能
        if (JSON.parse(userInfo)[0].usertype === 1) {
            $(".data-edit").attr("disabled", "disabled")
            $(".data-delete").attr("disabled", "disabled")
            $("#addStudent").attr("disabled", "disabled")
        }
        //按钮会消失
        // if ($("#data-type").html("学生")) {
        //     $(".data-edit").remove()
        //     $(".data-delete").remove()
        //     $("#addStudent").remove()
        // }
        //加载信息数据
        $.ajax({
                url: `${address}/getStudentList`,

                success(data) {
                    //data是啥
                    let tbody = $("tbody")
                    data.forEach(item => {
                        // console.log(item);
                        //插入数据库里的数据
                        let newItem = $("#template").clone(true)
                        newItem.attr("id", "")
                        newItem.find(".data-id").html(item.id)
                        newItem.find(".data-name").html(item.name)
                        newItem.find(".data-age").html(item.age)
                        newItem.find(".data-sex").html(item.sex ? "男" : "女")
                        newItem.find(".data-city").html(item.city)
                        newItem.find(".data-joinDate").html(item.joinDate)
                        newItem.appendTo(tbody)
                    })
                }
            })
            //删除
        $(".data-delete").click(function() {
            let nowItem = $(this).closest("tr");
            $.ajax({
                url: `${address}/deleteStudent`,
                data: {
                    id: $(this).closest("tr").find(".data-id").html()
                },
                success(data) {
                    if (data === "success") {
                        nowItem.fadeOut()
                    } else {
                        alert("删除失败")
                    }
                }
            })
        })

        //编辑
        $(".data-edit").click(function(event) {
            let _this = event.target
            $("#data-name").val($(_this).closest("tr").find(".data-name").html())
            $("#data-age").val($(_this).closest("tr").find(".data-age").html())
                // console.log($(_this).closest("tr").find(".data-sex").html()); //男还是女
            if ($(_this).closest("tr").find(".data-sex").html() == "女") {
                $("#pop").find("#data-female").prop("checked", true)
            }
            $("#data-joinDate").val($(_this).closest("tr").find(".data-joinDate").val())
                // console.log($(_this).closest("tr").find(".data-joinDate").val());
            $("#title").html("编辑学生")
            id = $(_this).closest("tr").find(".data-id").html()
        })

        //确认添加
        $("#submit").click(function() {
                if ($("#data-name").val() && $("#data-age").val() && $("data-joinDate")) {
                    if ($("#title").html() === "添加学生") {
                        $.ajax({
                            url: `${address}/addStudent`,
                            data: {
                                name: $("#data-name").val(),
                                age: $("#data-age").val(),
                                sex: $("#data-female")[0].checked ? "男" : "女",
                                city: $("#province").val() + $("#city").val() + $("#area").val(),
                                joinDate: $("#data-joinDate").val(),
                            },
                            success(data) {
                                if (data === "success") {
                                    history.go(0)
                                } else {
                                    alert("操作失败")
                                }
                            }
                        })
                    } else {
                        //更新学生
                        $.ajax({
                            url: `${address}/updateStudent`,
                            data: {
                                name: $("#data-name").val(),
                                age: $("#data-age").val(),
                                sex: $("#data-female")[0].checked ? "1" : "0",
                                city: $("#province").val() + $("#city").val() + $("#area").val(),
                                joinDate: $("#data-joinDate").val(),
                                id,
                            },
                            success(data) {
                                if (data === "success") {
                                    history.go(0)
                                } else {
                                    alert("操作失败")
                                }
                            }
                        })
                    }
                }
            })
            // 点击编辑的时候弹出层出来
        $(".data-edit").click(function() {
            $("#mask").fadeIn()
            $("#pop").fadeIn()
            $("#data-name").focus()
        })

        // 弹出层出来
        $("#addStudent").click(function() {
                $("#mask").fadeIn()
                $("#pop").fadeIn()
                $("#data-name").focus()
                $("#title").html("添加学生")
            })
            // 弹出层消失
        $("#cancel").click(function() {
            $("#mask").fadeOut()
            $("#pop").fadeOut()
        })

        window.onkeydown = function(event) {
            if (event.keyCode === 13) {
                $("#submit").click()
            }
            if (event.keyCode === 27) {
                $("#cancel").click()
            }
        }
    </script>
</body>

</html>